<template>
  <div class="timeline-item" :class="sideTheme">
    <div class="round"></div>
    <div class="timeline-box">
      <div class="item-left">
        <img :src="data.img" alt="" />
      </div>
      <div class="item-right">
        <span class="item-time">
          <calendar-alt class="time-icon" />
          {{ data.createTime }}
        </span>
        <span class="item-content" @click="toDetail">{{ data.title }}</span>
      </div>
    </div>
  </div>
</template>

<script setup name="TimelineItem">
import { CalendarAlt } from '@vicons/fa'
import { useRouter } from 'vue-router'
import { useSettingsStore } from "@/store"
import { toRefs } from "vue"
const router = useRouter()

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        img: "card_img.png",
        title: "获取街道、镇级的地图geoJson数据方法，使用echarts绘制出街道、镇级的地图区域画面（杭州市为例）",
        createTime: "",
        updateupTime: "",
        tag: "",
        content: ""
      }
    }
  }
})
const { data } = toRefs(props);

const toDetail = () => {
  if (data.value.route) {
    router.push({ name: data.value.route })
  }
}
</script>

<style lang="scss" scoped>
.timeline-item {
  position: relative;
  padding: 10px 25px;
  width: 100%;
  height: 100px;
  border-left: 2px solid #49b1f5;
}
.round {
  position: absolute;
  left: calc(-4px);
  top: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 3px solid #49b1f5;
  background: #eee;
  border-radius: 50%;
  transition: all 0.5s ease-in-out;
}
.timeline-box {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  top: calc(50% - 40px) !important;
}
.item-left {
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-right: 10px;
}
img {
  width: 80px !important;
  height: 80px;
  object-fit: cover;
  -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s;
}
.item-right {
  width: calc(100% - 73px);
  .item-content {
    display: block;
    color: #4c4948;
    font-size: 16px;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: all 0.2s ease-in-out;
  }
  .item-time {
    display: block;
    font-size: 15px;
    color: #858585;
    margin-bottom: 5px;
    .time-icon {
      width: 13px;
      height: 13px;
    }
  }
}
.item-content:hover {
  color: #80c8f8;
  transform: translateX(20px);
  cursor:url("../../../assets/cur/x2.cur"),default !important;
}
img:hover {
  transform: scale(1.1);
}
.timeline-item:hover {
  .round {
    border: 3px solid #ff7242;
  }
}
.theme-dark {
  background: transparent !important;
  .timeline-box {
    .item-right {
      .item-content {
        color: #FFF;
      }
    }
  }
}
</style>
